<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript">
    $(document).ready(function () {
        var fm = ["childForm", "child_container", "childFormId"];
        Page.createForm(fm);
        TempUtil.render('child_template', 'childForm', DOC);
        TempUtil.render('tr069_template', 'tr069Helper', DOC);
        var $btnSave = $('#btnSave');
        var $tr069 = $('.tr069'),
            $noticeInterval = $('#noticeInterval'),
            $trNotice = $('.trNotice'),
            $trAcs = $('.trAcs'),
            $trAcsInput = $('.trAcs input'),
            $trCpe = $('.trCpe'),
            $trCpeInput = $('.trCpe input');

        var $enabled = $('#enabled'),
            $noticeEnabled = $('#noticeEnabled'),
            $acsAuthEnabled = $('#acsAuthEnabled'),
            $cpeAuthEnabled = $('#cpeAuthEnabled');
        $tr069.hide();
        $(".trNotice").hide();
        $(".trAcs").hide();
        $(".trCpe").hide();

        function isShowenabled() {
            if ($("#enabled").prop("checked")) {
                $tr069.show();
            } else {
                $tr069.hide();
            }
        }
        function isShowtrNotice() {
            if ($("#noticeEnabled").prop("checked") && $("#enabled").prop("checked")) {
                $(".trNotice").show();
            } else {
                $(".trNotice").hide();
            }
        }

        function isShowtrAcs() {
            if ($("#acsAuthEnabled").prop("checked") && $("#enabled").prop("checked")) {
                $(".trAcs").show();
            } else {
                $(".trAcs").hide();
            }
        }

        function isShowtrCpe() {
            if ($("#cpeAuthEnabled").prop("checked") && $("#enabled").prop("checked")) {
                $(".trCpe").show();
            } else {
                $(".trCpe").hide();
            }
        }

        $("#enabled").change(function () {
            isShowenabled();
            isShowtrNotice();
            isShowtrAcs();
            isShowtrCpe();
        })
        $("#noticeEnabled").change(function () {
            isShowtrNotice();
        })
        $("#acsAuthEnabled").change(function () {
            isShowtrAcs();
        })
        $("#cpeAuthEnabled").change(function () {
            isShowtrCpe();
        })
        getTr069();
        // 获取TR069数据
        function getTr069() {
            Page.postJSON({
                json: {
                    cmd: RequestCmd.TR069_CONFIG,
                    method: JSONMethod.GET
                },
                success: function (data) {
                    var datas = data.tr069;
                    if (datas.tr069_app_enable == "y") {
                        $("#enabled").prop("checked", true);
                        $(".tr069").show();

                    } else {
                        $(".tr069").hide();
                        $("#enabled").prop("checked", false);
                    }
                    $("#enabled").attr("old", datas.tr069_app_enable);
                    $("#url").val(datas.tr069_ServerURL);
                    $("#url").attr("old", datas.tr069_ServerURL);

                    if (datas.tr069_PeriodicInformEnable == "y") {
                        $(".trNotice").show();
                        $noticeEnabled.prop("checked", true);
                    } else {
                        $noticeEnabled.prop("checked", false);
                        $(".trNotice").hide();
                    }
                    $noticeEnabled.attr("old", datas.tr069_PeriodicInformEnable)
                    $("#noticeInterval").val(datas.tr069_PeriodicInformInterval);
                    $("#noticeInterval").attr("old", datas.tr069_PeriodicInformInterval);

                    if (datas.tr069_ACS_auth == "y") {
                        $(".trAcs").show();
                        $acsAuthEnabled.prop("checked", true);
                    } else {
                        $('.trAcs').hide();
                        $acsAuthEnabled.prop("checked", false);
                    }
                    $acsAuthEnabled.attr("old", datas.tr069_ACS_auth);

                    if (datas.tr069_CPE_auth == "y") {
                        $(".trCpe").show();
                        $cpeAuthEnabled.prop("checked", true);
                    } else {
                        $(".trCpe").hide();
                        $cpeAuthEnabled.prop("checked", false);
                    }
                    $cpeAuthEnabled.attr("old", datas.tr069_CPE_auth);

                    $("#userName").val(datas.tr069_ServerUsername);
                    $("#passwd").val(datas.tr069_ServerPassword);
                    $("#linkUserName").val(datas.tr069_ConnectionRequestUname);
                    $("#linkPasswd").val(datas.tr069_ConnectionRequestPassword);

                    $("#userName").attr("old", datas.tr069_ServerUsername);
                    $("#passwd").attr("old", datas.tr069_ServerPassword);
                    $("#linkUserName").attr("old", datas.tr069_ConnectionRequestUname);
                    $("#linkPasswd").attr("old", datas.tr069_ConnectionRequestPassword);

                }
            });
        }
        var rules = {
            noticeInterval: { required: true, number: true, min: 30 },
            url: { required: true }
        },
            messages = {
                noticeInterval: { number: CHECK.format.inputNumber, min: CHECK.min.noticeInterval }
            };

        $btnSave.bind('click', function () {
            var $form = $('#childForm');
            if (!CheckUtil.checkForm($form, rules, messages)) {
                return false;
            }
            var json = JSON.parmsToJSON($form);
            json.cmd = RequestCmd.SET_TR069_CONFIG;
            json.method = JSONMethod.POST;
            json.flag = "";
            var temp = 0;
            if ($("#enabled").prop("checked")) {
                json.enabled = "y";
            } else {
                json.enabled = "n";
                $("#noticeEnabled").prop("checked", false);
                $("#acsAuthEnabled").prop("checked", false);
                $("#cpeAuthEnabled").prop("checked", false);
            }
            if ($("#noticeEnabled").prop("checked")) {
                json.noticeEnabled = "y";
            } else {
                json.noticeEnabled = "n";
            }
            if ($("#acsAuthEnabled").prop("checked")) {
                json.acsAuthEnabled = "y";
            } else {
                json.userName = "";
                json.passwd = "";
                json.acsAuthEnabled = "n";
            }

            if ($("#cpeAuthEnabled").prop("checked")) {
                json.cpeAuthEnabled = "y";
            } else {
                json.cpeAuthEnabled = "n";
                json.linkUserName = "";
                json.linkPasswd = "";
            }
            if (json.enabled != $("#enabled").attr("old")) temp++;
            if (json.url != $("#url").attr("old")) temp++;
            if (json.noticeEnabled != $("#noticeEnabled").attr("old")) temp++;
            if (json.acsAuthEnabled != $("#acsAuthEnabled").attr("old")) temp++;
            if (json.cpeAuthEnabled != $("#cpeAuthEnabled").attr("old")) temp++;
            if (json.userName != $("#userName").attr("old")) temp++;
            if (json.passwd != $("#passwd").attr("old")) temp++;
            if (json.linkUserName != $("#linkUserName").attr("old")) temp++;
            if (json.linkPasswd != $("#linkPasswd").attr("old")) temp++;
            if (json.noticeInterval != $("#noticeInterval").attr("old") && temp === 0) json.flag = 1;

            Page.postJSON({
                $id: $btnSave,
                json: json,
                success: function (data) {
                    if (data.success) {
                        getTr069();
                        AlertUtil.alertMsg(PROMPT.saving.success);
                    }
                }
            });
        });

        $('#childForm').addClass("tr069_form");

        Page.setStripeTable();
    });
</script>

<div class="tab_box" id="child_container">
    <div id="childFormId">
        <script type="text/template" id="child_template">
            <!-- <form id="childForm" class="tr069_form"> -->
            <table id="childTable" class="detail" cellspacing="0">
                <tr>
                    <th><%- tr069.enable %><%- colon %></th>
                    <td>
                        <input type="checkbox" id="enabled" name="enabled" /><%- status.enable %>
                    </td>
                </tr>
                <tr class="tr069 showEnable">
                    <th><%- tr069.url %><%- colon %></th>
                    <td><input type="text" id="url" name="url" class="larger" maxlength="100" /></td>
                </tr>
                <tr class="tr069 showEnable">
                    <th><%- tr069.enableNotice %><%- colon %></th>
                    <td>
                        <input type="checkbox" id="noticeEnabled" name="noticeEnabled" /><%- status.enable %>
                    </td>
                </tr>
                <tr class="tr069 trNotice">
                    <th><%- tr069.noticeInterval %><%- colon %></th>
                    <td><input type="text" id="noticeInterval" name="noticeInterval" maxlength="10" class="txt2" /><span class="cmt"><%- unit.second %></span></td>
                </tr>
                <tr class="tr069 showEnable">
                    <th><%- tr069.enableAcsAuth %><%- colon %></th>
                    <td>
                        <input type="checkbox" id="acsAuthEnabled" name="acsAuthEnabled" /><%- status.enable %>
                    </td>
                </tr>
                <tr class="tr069 trAcs">
                    <th><%- tr069.acsUsername %><%- colon %></th>
                    <td><input type="text" id="userName" name="userName" maxlength="30" /></td>
                </tr>
                <tr class="tr069 trAcs">
                    <th><%- tr069.acsPasswd %><%- colon %></th>
                    <td><input type="text" id="passwd" name="passwd" maxlength="30" /></td>
                </tr>
                <tr class="tr069 showEnable">
                    <th><%- tr069.enableCpeAuth %><%- colon %></th>
                    <td>
                        <input type="checkbox" id="cpeAuthEnabled" name="cpeAuthEnabled" /><%- status.enable %>
                    </td>
                </tr>
                <tr class="tr069 trCpe">
                    <th><%- tr069.cpeUsername %><%- colon %></th>
                    <td><input type="text" id="linkUserName" name="linkUserName" maxlength="30" /></td>
                </tr>
                <tr class="tr069 trCpe">
                    <th><%- tr069.cpePasswd %><%- colon %></th>
                    <td><input type="text" id="linkPasswd" name="linkPasswd" maxlength="30" /></td>
                </tr>
                <tr id="trSave">
                    <th>&nbsp;</th>
                    <td>
                        <input type="button" id="btnSave" value="<%- btn.save %>"/>
                    </td>
                </tr>
            </table>
        </script>
    </div> 
        <!-- </form> -->
    <div class="tr069_helper_container">
        <div class = "tr069_helper" id="tr069Helper">
            <script type="text/template" id="tr069_template">
                <div class="helper_name"><%- DOC.tr069helper.title1 %></div>
                <div class="helper_desc"><%- DOC.tr069helper.name1 %></div>

                <div class="helper_name"><%- DOC.tr069helper.title2 %></div>
                <div class="helper_desc"><%- DOC.tr069helper.name2 %></div>

                <div class="helper_name"><%- DOC.tr069helper.title3 %></div>
                <div class="helper_desc"><%- DOC.tr069helper.name3 %></div>

                <div class="helper_name"><%- DOC.tr069helper.title4 %></div>
                <div class="helper_desc"><%- DOC.tr069helper.name4 %></div>

                <div class="helper_name"><%- DOC.tr069helper.title5 %></div>
                <div class="helper_desc"><%- DOC.tr069helper.name5 %></div>

                <div class="helper_name"><%- DOC.tr069helper.title6 %></div>
                <div class="helper_desc"><%- DOC.tr069helper.name6 %></div>

                <div class="helper_name"><%- DOC.tr069helper.title7 %></div>
                <div class="helper_desc"><%- DOC.tr069helper.name7 %></div>

                <div class="helper_name"><%- DOC.tr069helper.title8 %></div>
                <div class="helper_desc"><%- DOC.tr069helper.name8 %></div>

                <div class="helper_name"><%- DOC.tr069helper.title9 %></div>
                <div class="helper_desc"><%- DOC.tr069helper.name9 %></div>

                <div class="helper_name"><%- DOC.tr069helper.title10 %></div>
                <div class="helper_desc"><%- DOC.tr069helper.name10 %></div>
            </script>
        </div>
    </div>
</div>